<template>
  <div class="box">
    <div class="top-list">
      <div class="top-list-item">昨日收益：{{ user.income }}</div>
      <div class="top-list-item">昨日拉升：{{ user.increase }}</div>
      <div class="top-list-item">可用：{{ user.usable }}</div>
      <div class="top-list-item">冻结：{{ user.froze }}</div>
    </div>
    <div style="height:300px;margin-top:30rpx;">
      <div class="title">14天增长曲线</div>
      <div class="header">
        <div class="item">
          <div class="value">{{ account || 0 }}</div>
          <div class="name">当前价格</div>
        </div>
        <div class="item" style="text-align: right;">
          <div class="value red">{{ average || 0 }}</div>
          <div class="name">14天平均每日涨幅</div>
        </div>
      </div>
      <div id="myEchats" style="height:220px;width: 680rpx;"></div>
    </div>
    <div style="margin-top:70px">
      <div class="title">增长记录</div>
      <div class="table-list">
        <div class="table-list-item" v-for="(item, index) in list" :key="index">
          <div class="account">+{{ item.pullup_money }}</div>
          <div class="date">{{ item.date }}</div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
// import { Toast } from 'vant';
import echarts from '@/utils/echarts';
export default {
  data() {
    return {
      chartData: {},
      number: [],
      date: [],
      average: 0,
      user: {},
      list: [],
      option: {
        title: {
          text: ''
        },
        tooltip: {
          trigger: 'axis'
        },
        legend: {
          data: []
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        toolbox: {
          feature: {
            saveAsImage: {}
          }
        },
        xAxis: {
          type: 'category',
          boundaryGap: false,
          data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
        },
        yAxis: {
          type: 'value'
        },
        series: [
          {
            name: '销量',
            type: 'line',
            data: [820, 932, 901, 934, 1290, 1330, 1320]
          }
        ]
      }

    };
  },
  created() {

  },
  computed: {

  },
  mounted() {

    this.getData();

  },
  methods: {
    initEcharts() {
      let $echartsDOM = document.getElementById('myEchats');
      this.myEcharts = echarts.init($echartsDOM);
      this.myEcharts.setOption(this.option);
    },
    getData() {
      $http.post("plugin.love.Frontend.Controllers.pull-up.data", {}, " ").then(
        res => {
          let data = res.data;
          if (res.result == 1) {
            let date = [];
            let number = [];
            let newList = JSON.parse(JSON.stringify(data.reverse_list));
            // if (newList.length > 0) {
            //   // 按value字段升序排序
            //   newList.sort(function (a, b) {
            //     return a.date - b.date;
            //   });
            // }
            newList.forEach(item => {
              date.push(item.love_money ? item.love_money * 1 : 0);
              number.push(item.date);
            });
            data.user.income = (data.user.income * 1 || 0).toFixed(2);
            data.user.income = (data.user.increase * 1 || 0).toFixed(2);
            data.user.income = (data.user.usable * 1 || 0).toFixed(2);
            data.user.income = (data.user.froze * 1 || 0).toFixed(2);
            let d = new Date();
            // let year = d.getFullYear();
            // let month = d.getMonth() + 1;
            // month = month >= 10 ? month : '0' + month;
            let list = JSON.parse(JSON.stringify(data.list));
            list.forEach(item => {
              item.date = `${item.date}`;
            });
            this.chartData = data;
            this.average = data.average_pull_up;
            this.account = data.love_money;
            this.number = number;
            this.date = date;
            this.list = list;
            this.user = data.user;
            this.option.xAxis.data = number;
            this.option.series[0].data = date;
            this.initEcharts();
          }

        },
        function (res) {
          console.log(res);
        }
      );
    },
  }
};    
</script>
<style lang="scss" rel="stylesheet/scss" scoped>
.box {
  background-color: #fff;
  border-radius: 10px;
  margin: 10px;
  padding-bottom: 15px;
  overflow: hidden;
  text-align: left;
}

.title {
  font-weight: bold;
  font-size: 15px;
  line-height: 1;
  padding-left: 5px;
  border-left: 4px solid #f15353;
  margin-bottom: 30px;
  padding: 10px;
}

.header {
  display: flex;
  justify-content: space-between;
  padding: 10px;
}

.header .item .value {
  font-size: 18px;
  font-weight: bold;
}

.header .item .red {
  color: #f15353
}

.top-list {
  background-color: #f15353;
  border-radius: 5px;
  padding: 10px;
  display: flex;
  flex-wrap: wrap;
  margin: 10px;
}

.top-list-item {
  width: 50%;
  color: #fff
}

.table-list {
  padding: 10px
}

.table-list-item {
  display: flex;
  justify-content: space-between;
  height: 40px;
  line-height: 40px;
  border-bottom: 1px solid #f1f1f1
}

.table-list-item .account {
  color: #f15353;
  font-weight: bold;
}
</style>
